﻿[#include "common/html.ftl" /]
[@html]
    [@head title="DB Adminer" css=["fw", "contextMenu", "assets", "index"]]
        <style>
            .brand {
                -webkit-transition: 700ms;
                transition: 700ms;
                position: absolute;
                z-index: 101;
                top: 0;
                width: 100%;
                height: 0;
            }
            .fw-sys-logout {
                position: fixed;
                bottom: 20px;
                right: 30px;
                font-size: 20px;
                color: #ddd;
                cursor: pointer;
            }
            .fw-sys-logout:hover {
                font-size: 24px;
                color: #fff;
            }
        </style>
    [/@head]
    [@body class="" style=""]
        <div class="page-wrapper" >
            <div class="loading-overlay"></div>

            <div class="brand">
                <a href="${ctx}/osfw/index">
                    <h2 style="padding: 1.4rem 1.4rem;">DB Adminer</h2>
                </a>
            </div>
            <!--end brand-->

            <div class="slider-navigation">
                <div class="slider-pager owl-carousel"></div>
                <div class="slider-controls">
                    <a href="#" class="prev">
                        <i class="fa fa-chevron-left"></i>
                    </a>
                    <a href="#" class="next">
                        <i class="fa fa-chevron-right"></i>
                    </a>
                    <a href="#" class="zoom-out">
                        <i class="fa fa-search-minus"></i>
                    </a>
                </div>
            </div>
            <!--end slider-navigation-->

            <div class="outer-wrapper">
                <div class="inner-wrapper">
                    <div class="slide first" id="0" data-position-x="0" data-position-y="0" data-position-z="1" data-rotation="0">
                        <div class="main-title">
                            <div class="main-title-wrapper" style="letter-spacing: 3rem;">
                                <h1 class="am-text-xxxl" style="font-size: 6vw;">你好! 我是 DB Adminer</h1>
                                <h2 class="am-text-xxl am-margin-0" style="font-size: 3vw;">Hi there! I'm DB Adminer</h2>
                                <h1 class="am-text-xxl am-margin-top-lg" style="font-size: 3.5vw;">基于Web的数据库专业工具</h1>
                                <h2 class="am-text-xl  am-margin-top-0 am-margin-bottom-lg" style="font-size: 2vw;">A Professional Web-based Tool of Your Databases</h2>
                                <a href="#" class="am-btn btn-default enter" title="进入我的工作区">
                                    <span class="am-text-lg">进入我的工作区</span><br/>
                                    <span class="am-text-sm" style="color: #ddd;">Enter my workspaces</span>
                                </a>
                                <div class="user-agreement" style="width: 226px;margin: 10px auto;color: #fff;">
                                    <label class="am-checkbox" onclick="agreement(this)" style="cursor: pointer">
                                        [#if isAgreement?? && isAgreement == "1"]
                                            <input type="checkbox" name="userAgreement" value="1" data-am-ucheck disabled checked  style="cursor: pointer">我已阅读并同意《用户协议》
                                        [#else ]
                                            <input type="checkbox" name="userAgreement" value="0" data-am-ucheck disabled  style="cursor: pointer">我已阅读并同意《用户协议》
                                        [/#if]
                                    </label>
                                </div>
                                <span class="am-icon-power-off fw-sys-logout" onclick="logout()" title="退出系统"></span>
                            </div>
                        </div>
                        <div class="image" data-background="${ctx}/osfw/framework/index/assets/img/bg-99.jpg"></div>
                        <!--end image-->
                    </div>
                    <!--end slide-->

                    [#if sysMenus?? ]
                        [#list sysMenus as sysMenu ]
                            [#if sysMenu.url?? ]
                                [#if sysMenu.url != '#' ]
                                    [#if sysMenu.url?starts_with("http://") ]
                                        <div class="slide hide-description" id="${sysMenu.menuId!}" data-menuname="${sysMenu.menuName!}" data-menutarget="${sysMenu.target!}" data-menuurl="${sysMenu.url!}" data-menuicon="${sysMenu.icon!}">
                                            <div class="description">
                                                <h2 class="animate">${sysMenu.menuName!}</h2>
                                            </div>
                                            <!--end description-->
                                            [#if sysMenu.background?? ]
                                                [#if sysMenu.background?starts_with("#") || sysMenu.background?starts_with("http") || sysMenu.background?contains("osfw/") ]
                                                    <div class="image" data-background="${sysMenu.background!}"><i class="${sysMenu.icon!}"></i></div>
                                                    <!--end image-->
                                                [#else ]
                                                    <div class="image" data-background="${'data:image/png;base64,'+sysMenu.background!}"><i class="${sysMenu.icon!}"></i></div>
                                                    <!--end image-->
                                                [/#if]
                                            [#else ]
                                                <div class="image" data-background="${ctx}/osfw/framework/index/assets/img/bg-${sysMenu_index}.jpg"><i class="${sysMenu.icon!}"></i></div>
                                                <!--end image-->
                                            [/#if]
                                        </div>
                                        <!--end slide-->
                                    [#else ]
                                        <div class="slide hide-description" id="${sysMenu.menuId!}" data-menuname="${sysMenu.menuName!}" data-menutarget="${sysMenu.target!}" data-menuurl="${ctx + sysMenu.url!}" data-menuicon="${sysMenu.icon!}">
                                            <div class="description">
                                                <h2 class="animate">${sysMenu.menuName!}</h2>
                                            </div>
                                            <!--end description-->
                                            [#if sysMenu.background?? ]
                                                [#if sysMenu.background?starts_with("#") || sysMenu.background?starts_with("http") || sysMenu.background?contains("osfw/") ]
                                                    <div class="image" data-background="${sysMenu.background!}"><i class="${sysMenu.icon!}"></i></div>
                                                    <!--end image-->
                                                [#else ]
                                                    <div class="image" data-background="${'data:image/png;base64,'+sysMenu.background!}"><i class="${sysMenu.icon!}"></i></div>
                                                    <!--end image-->
                                                [/#if]
                                            [#else ]
                                                <div class="image" data-background="${ctx}/osfw/framework/index/assets/img/bg-${sysMenu_index}.jpg"><i class="${sysMenu.icon!}"></i></div>
                                                <!--end image-->
                                            [/#if]
                                        </div>
                                        <!--end slide-->
                                    [/#if]
                                [#else ]
                                    <div class="slide hide-description" id="${sysMenu.menuId!}" data-menuname="${sysMenu.menuName!}" data-menutarget="${sysMenu.target!}" data-menuurl="javascript: void(0);" data-menuicon="${sysMenu.icon!}">
                                        <div class="description">
                                            <h2 class="animate">${sysMenu.menuName!}</h2>
                                        </div>
                                        <!--end description-->
                                        [#if sysMenu.background?? ]
                                            [#if sysMenu.background?starts_with("#") || sysMenu.background?starts_with("http") || sysMenu.background?contains("osfw/") ]
                                                <div class="image" data-background="${sysMenu.background!}"><i class="${sysMenu.icon!}"></i></div>
                                                <!--end image-->
                                            [#else ]
                                                <div class="image" data-background="${'data:image/png;base64,'+sysMenu.background!}"><i class="${sysMenu.icon!}"></i></div>
                                                <!--end image-->
                                            [/#if]
                                        [#else ]
                                            <div class="image" data-background="${ctx}/osfw/framework/index/assets/img/bg-${sysMenu_index}.jpg"><i class="${sysMenu.icon!}"></i></div>
                                            <!--end image-->
                                        [/#if]
                                    </div>
                                    <!--end slide-->
                                [/#if]
                            [#else ]
                                <div class="slide hide-description" id="${sysMenu.menuId!}" data-menuname="${sysMenu.menuName!}" data-menutarget="${sysMenu.target!}" data-menuurl="javascript: void(0);" data-menuicon="${sysMenu.icon!}">
                                    <div class="description">
                                        <h2 class="animate">${sysMenu.menuName!}</h2>
                                    </div>
                                    <!--end description-->
                                    [#if sysMenu.background?? ]
                                        [#if sysMenu.background?starts_with("#") || sysMenu.background?starts_with("http") || sysMenu.background?contains("osfw/") ]
                                            <div class="image" data-background="${sysMenu.background!}"><i class="${sysMenu.icon!}"></i></div>
                                            <!--end image-->
                                        [#else ]
                                            <div class="image" data-background="${'data:image/png;base64,'+sysMenu.background!}"><i class="${sysMenu.icon!}"></i></div>
                                            <!--end image-->
                                        [/#if]
                                    [#else ]
                                        <div class="image" data-background="${ctx}/osfw/framework/index/assets/img/bg-${sysMenu_index}.jpg"><i class="${sysMenu.icon!}"></i></div>
                                        <!--end image-->
                                    [/#if]
                                </div>
                                <!--end slide-->
                            [/#if]
                        [/#list]
                    [/#if]
                </div>
                <!--end inner-wrapper-->

            </div>
            <!--end outer-wrapper-->

            <div class="index-wrapper">
                <div class="am-g fw-layout">
                    <div class="am-u-sm am-margin-0 am-padding-0 fw-sider">
                        <div class="am-u-sm am-margin-0 am-padding-0 fw-logo">
                            [#--侧边栏--头像部分--]
                            <img src="${userAvatar!}" onerror="this.src='${ctx}/osfw/framework/index/img/profile_user.jpg'" width="36" height="36" alt="DB Adminer" data-am-offcanvas="{target: '#fw-offcanvas-setup-app'}" title="设置">
                        </div>
                        <div id="fw-menu-accordion" class="am-u-sm am-margin-0 am-padding-0 fw-menu">
                            [#--侧边栏--菜单部分--]
                            <div id="fw-menu-do" class="fw-message-menu am-panel-collapse am-collapse am-in"></div>
                        </div>
                        <div class="am-u-sm am-margin-0 am-padding-0 fw-switch" title="切换系统模块">
                            [#--侧边栏--切换部分--]
                            <div id="fw-switch-btn"><i class="sys-icon-switch"></i></div>
                        </div>
                    </div>
                    <div class="am-u-sm am-margin-0 am-padding-0 fw-oper">
                        <div class="am-u-sm am-margin-0 am-padding-0 fw-search am-hide">
                            [#--操作栏--搜索添加--]
                            <div class="am-input-group am-input-group-sm">
                                <input type="text" class="am-form-field" name="menuSearch" placeholder="搜索..." onkeyup="searchMenu(this)"/>
                                <span class="am-input-group-btn" onclick="addConnect()">
                                    <button class="am-btn am-btn-default" type="button"><span class="am-icon-plus"></span></button>
                                </span>
                            </div>
                        </div>
                        <div id="fw-item-accordion" class="am-u-sm am-margin-0 am-padding-0 fw-item am-hide"></div>
                        <div class="am-u-sm am-margin-0 am-padding-0 fw-clock am-hide">
                            [#--操作栏--系统时钟--]
                            <span id="clock"></span>
                        </div>
                    </div>
                    <div class="am-u-sm am-margin-0 fw-container">
                        <div class="fw-foldbar am-radius">
                            <div id="fw-foldbar-outdent" title="展开操作面板">展开</div>
                            <div id="fw-foldbar-indent" class="am-hide" title="折叠操作面板">折叠</div>
                        </div>
                        <div class="am-u-sm fw-header">
                            <div class="am-u-sm am-margin-0 am-padding-0 fw-header-logo">
                                <div id="fw-header-logo-title" class="text">DB</div>
                            </div>
                            <div class="am-u-sm am-margin-0 am-padding-0 fw-header-nav">
                                [#--滚动按钮 向左 --]
                                <div class="am-u-sm am-margin-0 fw-menu-scroll-left am-hide">
                                    <div class="am-margin-0 am-padding-0">
                                        <i class="am-icon-caret-left"></i>
                                    </div>
                                </div>
                                <div class="am-u-sm am-margin-0 am-padding-0 fw-menu-tab"></div>
                                [#--滚动按钮 向右 --]
                                <div class="am-u-sm am-margin-0 fw-menu-scroll-right am-hide">
                                    <div class="am-margin-0 am-padding-0">
                                        <i class="am-icon-caret-right"></i>
                                    </div>
                                </div>
                                [#--添加tab--]
                                <div class="am-u-sm am-margin-0 fw-menu-add">
                                    <div class="am-margin-0 am-padding-0">
                                        <a class="am-icon-btn am-radius am-icon-plus" data-id="0" data-icon="am-icon-navicon" title="新建页签"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm am-margin-0 am-padding-0 fw-content">
                            <div class="fw-iframe-content">
                                <iframe class="moxia_iframe" name="iframe0" width="100%" height="100%" data-id="0" data-url="${ctx}/osfw/main" style="vertical-align:bottom;" src="${ctx}/osfw/main" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes" seamless></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="description" hidden>
                    <h2 class="animate in"></h2>
                </div>
                <div class="am-offcanvas fw-offcanvas" id="fw-offcanvas-setup-app">
                    [#--设置 滑出面板--]
                    <div class="am-offcanvas-bar fw-offcanvas-bar-bg fw-oper-offcanvas">
                        <ul class="am-menu-nav am-avg-sm-1">
                            <li>
                                <figure data-am-widget="figure" class="am am-figure am-figure-default" data-am-figure="{pureview: 'true'}">
                                    <img src="${userAvatar!}" class="" onerror="this.src='${ctx}/osfw/framework/index/img/profile_user.jpg'" alt="用户头像" width="120" height="120">
                                    <figcaption class="am-figure-capition-btm" style="line-height: 0px;">
                                        <a href="#" style="color: #125cff!important;">
                                            [#if "00:00:00"?time('HH:mm:ss') <= (.now?string("HH:mm:ss"))?time('HH:mm:ss') && (.now?string("HH:mm:ss"))?time('HH:mm:ss') < "08:00:00"?time('HH:mm:ss') ]
                                                早上好 ${userPost!''} ${userName!''}
                                            [#elseif "08:00:00"?time('HH:mm:ss') <= (.now?string("HH:mm:ss"))?time('HH:mm:ss') && (.now?string("HH:mm:ss"))?time('HH:mm:ss') < "11:00:00"?time('HH:mm:ss') ]
                                                上午好 ${userPost!''} ${userName!''}
                                            [#elseif "11:00:00"?time('HH:mm:ss') <= (.now?string("HH:mm:ss"))?time('HH:mm:ss') && (.now?string("HH:mm:ss"))?time('HH:mm:ss') < "13:00:00"?time('HH:mm:ss') ]
                                                中午好 ${userPost!''} ${userName!''}
                                            [#elseif "13:00:00"?time('HH:mm:ss') <= (.now?string("HH:mm:ss"))?time('HH:mm:ss') && (.now?string("HH:mm:ss"))?time('HH:mm:ss') < "19:00:00"?time('HH:mm:ss') ]
                                                下午好 ${userPost!''} ${userName!''}
                                            [#elseif "19:00:00"?time('HH:mm:ss') <= (.now?string("HH:mm:ss"))?time('HH:mm:ss') && (.now?string("HH:mm:ss"))?time('HH:mm:ss') < "23:59:59"?time('HH:mm:ss') ]
                                                晚上好 ${userPost!''} ${userName!''}
                                            [#else ]
                                                你好 ${userPost!''} ${userName!''}
                                            [/#if]
                                        </a>
                                    </figcaption>
                                </figure>
                            </li>
                        </ul>
                        <ul class="am-menu-nav am-avg-sm-1 fw-dropdown-content-app">
                            <li><a onclick="editPwd()" class="am-icon-key"> 修改密码</a></li>
                            <li><a onclick="jianshezhong()" class="am-icon-dashboard"> 主题皮肤</a></li>
                            <li><a onclick="jianshezhong()" class="am-icon-toggle-off"> 页签开关</a></li>
                            <li class="fw-logout-btn"><a href="javascript:void(0)" onclick="logout()" class="am-icon-sign-out"> 退出登录</a></li>
                        </ul>
                        <div class="fw-footer-miscs">
                            <hr data-am-widget="divider" class="am-divider am-divider-dashed"/>
                            <p>由 <a href="https://gitee.com/fanjunzi/junzi-dbadminer" title="DB Adminer" target="_blank">fanwei</a> 提供技术支持</p>
                            <p>CopyRight©2024 OSFW.</p>
                            <p>MIT License</p>
                        </div>
                    </div>
                </div>
            </div>
            <!--end index-wrapper-->
        </div>
        <!--end page-wrapper-->

        [@script js=["fw", "fullscreen", "contextMenu", "assets", "front", "index"] progress="false"]
            <!-- 自定义js -->
            <script type="text/javascript">
                var isAgreement = '${isAgreement!'0'}';

                function editPwd() {
                    $.modal.open("修改密码", ctx + "osfw/system/manage/user/editPwd", 800, 550);
                }

                function addConnect() {
                    $.modal.open("新建连接", ctx + "osfw/dbadminer/connect/add", 500, null);
                }

                function agreement() {
                    $.modal.openTransparentFull("", ctx + "osfw/agreement", null, false);
                }

                function userAgreementCallback(usbKey, userSign) {
                    console.log(usbKey, userSign);
                    $.operate.post(ctx + "osfw/agreeAgreement", {"usbKey": usbKey, "userSign": userSign}, function (res) {
                        if (res.data == true) {
                            $('input[type="checkbox"][name=userAgreement]').prop('checked', true);
                        }else {
                            $.common.alertError("签订协议失败，请检查您的签字及数字证书是否完整有效！");
                        }
                    });
                }
            </script>
        [/@script]
    [/@body]
[/@html]